<template>
  <div class="app-container">
    <p style="color:#303133;margin:0;">公司数据概览</p>
    <el-row :gutter="20">
      <el-col :span="5">
        <panel-group :basicData="studyTimeData"></panel-group>
      </el-col>
      <el-col :span="5">
        <panel-group :basicData="studyCourseData"></panel-group>
      </el-col>
      <el-col :span="5">
        <panel-group :basicData="userData"></panel-group>
      </el-col>
      <el-col :span="5">
        <panel-group :basicData="studyCompleteData"></panel-group>
      </el-col>
      <el-col :span="4">
        <div class="card-data">
          <div>
             <el-dropdown  size="medium" @command="handleCommand" class="card-select">
              <span class="el-dropdown-link">{{cardName}}
                <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-for="item in cardList" :key="item.id"  :command="item">{{item.cardName}}</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <span style="font-size:14px;color:#666;">账号剩余</span>
          </div>
         
          <div style="text-align:center;">
           
            <el-progress type="circle" :percentage="Number(cardRemain)" :width="70"></el-progress>
            
          </div>
           
        </div>
      </el-col>
    </el-row>
    <div class="studyTime-container mag30 content">
      <el-row class="nav-container">
        <el-col :span="10">
          <span class="nav-title" :class=" statisType== 'time'?'is-active':''" @click="changeStatisType('time')">学习时长</span>
          <span class="nav-title"  :class=" statisType== 'user'?'is-active':''" @click="changeStatisType('user')">学习人数</span>
        </el-col>
        <el-col :span="7">
          <span
            v-for="item in dateArray"
            :key = "item.name"
            class="nav-title"
            :class="item.value == statisticsTimeData.timeType?'is-active':''"
            @click="changeTimeType(item)"
          >{{item.name}}</span>
        </el-col>
        <el-col :span="7" style="padding-top:10px;">
          <el-date-picker
            v-model="dateScope"
            :unlink-panels="true"
            size="medium"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="getTimeArray"></el-date-picker>
        </el-col>
      </el-row>
    </div>
    <el-row class="content">
      <el-col :span="17" style="padding:20px;">
        <bar-chart
          :xAxisData="barChartXAxisData"
          :chartData="barChartData"
          :data-name="studyStatisData.dataName"
          :yAname="studyStatisData.yAname"
          :xRotate= "50"
          width="90%"
        ></bar-chart>
      </el-col>
      <el-col :span="7">
        <p>学习排行(单位分钟)</p>
        <ul class="ranking">
          <li class="clearfix" v-for="(item,index) in ranking" :key="index">
            <span class="ranking-num left" :class="index<3?'ranking-after':''">{{index+1}}</span>
            <span class="ranking-name left">{{item.userName}}</span>
            <span class="ranking-time right">{{item.studyTime}}</span>
          </li>
        </ul>
      </el-col>
    </el-row>
    <div class="mag30 department-container content" v-show="departmentArray.length>0">
      <span style="font-size:16px;position:absolute;top:1px;left:20px;">部门完成率</span>
      <i class="el-icon-arrow-left" v-show="departmentArray.length>5" @click="getMinDepart"></i>
      <ul class="clearfix">
        <li class="left" v-for="(item,index) in departmentArray" :key="item.name" v-show="index>=departRange.minIndex&&index<=departRange.maxIndex">
          <p class="department-name">{{item.name}}</p>
          <div class="clearfix percentage-container">
            <div class="left">
              <p class="title">课程完成率</p>
              <p class="percentage">{{item.completionRatio}}%</p>
            </div>
            <div class="left">
              <el-progress type="circle" :percentage="Number(item.completionRatio)" :width="100"></el-progress>
            </div>
          </div>
        </li>
      </ul>
      <i class="el-icon-arrow-right" v-show="departmentArray.length>5"  @click="getMaxDepart"></i>
    </div>
    <div class="mag30 footer-container">
         <div class="content">
           <div class="title-container">
             <p class="title">课程关注排行</p> 
           </div>
             <el-table
              :data="courserRanking"
              style="width: 100%;padding:0 20px;"
              >
   
               <el-table-column
                type="index"
                 label="排名"
               >
              </el-table-column>
              <el-table-column
                prop="name"
                label="课程名字"
               >
              </el-table-column>
              <el-table-column
                prop="attention"
                label="用户数">
              </el-table-column>
            </el-table>

         </div>
         <div class="content">
            <div class="title-container">
              <p class="title">学习数据占比</p> 
              <el-radio-group v-model="studyType" style="width:80%" @change="changeStudyDateType">
                <el-radio-button label="课程"></el-radio-button>
                <!-- <el-radio-button label="考试"></el-radio-button> -->
              </el-radio-group>
           </div>
           <div style="width: 100%;padding:0 20px;">
             <piedoughnut-chart :title="pieTitle" :legendData="legendData" :seriesData="seriesData"></piedoughnut-chart>
           </div>
         </div>
    </div>
  </div>
</template>

<script>
import { Message } from 'element-ui';
import moment from 'moment/moment'
import {timeForMat, safariDate,getMomentValue} from '@/utils/index'
import { getCardList,getStudyTotalTime,getStudyTotalCourse,getUserNum,getStudyCompletionRatio, getStudyStatisticsByTime, getStudyUsersByTime, getLearningRanking, getCourseData,getStudyFinishData} from '@/api/dashboard'
import {getComanyId} from '@/utils/auth'
import BarChart from "@/components/Echarts/BarChart";
import PanelGroup from "@/components/Echarts/PanelGroup";
import PiedoughnutChart from '@/components/Echarts/PieDoughnutChart'
export default {
  name: "company",
  components: {
    PanelGroup,
    BarChart,
    PiedoughnutChart
  },
  computed: {},
  data() {
    return {
      companyId:"",
      studyTimeData:{
         icon: "clock2",
          text: "今日学习时长",
          value: 0,
           explain:"小时"
      },
      studyCourseData:{
         icon: "play",
          text: "学习课程数",
          value: 0
      },
      userData:{
          icon: "peoples",
          text: "人员数",
          value: 0
      },
      studyCompleteData:{
         icon: "stats-bars",
          text: "学习完成率",
          value: 0,
          explain:"%"
      },
      cardList:[],
      cardName:"",
      cardRemain:0,//学习卡剩余百分比
      dateArray: [
        {
          name: "今日",
          value: "1"
        },
        {
          name: "本周",
          value: "2"
        },
        {
          name: "本月",
          value: "3"
        },
        {
          name: "全年",
          value: "4"
        }
      ],
      studyStatisData:{//学习数据chart 数据对象
          dataName:"学习时长/分钟",
          xAname:"时间",
          yAname:"分钟"
      },
      statisType:"time",//数据类型（学习时长、学习人数）
      ranking: [], //统计数组
      departmentArray: [ ],//部门数组
      departRange:{//部门范围
        minIndex:0,
        maxIndex:4
      },//部门范围
      courserRanking:[],
      statisticsTimeData:{//学习时间 学习人数接口参数
        companyId:"",
        timeType:"2",
        startTime:"",
        endTime:""
      },
      studyType:"课程",
      dateScope: [], //日期范围
      finishData:{
        studyType:1,
        companyId:"",
        orgType:3
      },
      pieTitle:"课程完成情况",
      legendData:[],
      seriesData:[ ],
      barChartXAxisData: [//横轴
       
      ], //时段数据
      barChartData: []
    };
  },
  created(){
    this.companyId = getComanyId();
    this.statisticsTimeData.companyId = getComanyId();
    this.finishData.companyId =  getComanyId();
    this.initData();
  },
  methods:{
    async initData(){
      let companyData = {companyId:this.companyId};
      let cardList = await getCardList({companyId:this.companyId,authStatus:1});
      let studyTotalTime = await getStudyTotalTime(companyData);
      let studyTotalCourse = await getStudyTotalCourse(companyData);
      let userNum = await getUserNum(companyData);
      let studyCompletionRatio = await getStudyCompletionRatio({orgType:3,...companyData});
      let deptCompletionRatio = await getStudyCompletionRatio({orgType:2,...companyData});
      let statisticsByTime = await this.getStudyStatisticsByTime(this.statisticsTimeData);
      let getLearningRanking = await this.getLearningRanking();
      let courseData = await getCourseData();
      let finishData = await this.getStudyFinishData("课程");
      this.cardList = cardList.entity;
      this.studyTimeData.value = studyTotalTime.entity?studyTotalTime.entity.totalStudyTime:0;
      this.studyCourseData.value = studyTotalCourse.entity? studyTotalCourse.entity.courseNum:0;
      this.userData.value = userNum.entity? userNum.entity.userNum:0; 
      this.studyCompleteData.value = studyCompletionRatio.entity?studyCompletionRatio.entity[0].completionRatio:0;
      this.cardRemain = parseFloat(this.cardList[0].remainNum/this.cardList[0].totalNum*100).toFixed(2);
      this.cardName = this.cardList[0].cardName;
      this.departmentArray = [...deptCompletionRatio.entity];
      this.courserRanking = [...courseData.entity];
     
      
      
    },
    getStudyStatisticsByTime(data){
      getStudyStatisticsByTime(data).then((res)=>{
          let entity = res.entity;
           this.barChartXAxisData = [];
          if(this.statisticsTimeData.timeType !='4'){
            entity.time.forEach(item => {
              this.barChartXAxisData.push(moment(item).format("MM-DD"));
            });
          }else{
            this.barChartXAxisData = entity.time;
          };
          this.barChartData = entity.data;
          this.studyStatisData = {//学习数据chart 数据对象
              dataName:"学习时长/分钟",
              xAname:"时间",
              yAname:"分钟"
          };
      })
    },
    getStudyUsersByTime(data){
      getStudyUsersByTime(data).then((res)=>{
         let entity = res.entity;
          this.barChartXAxisData = [];
          if(this.statisticsTimeData.timeType !='4'){
            entity.time.forEach(item => {
              this.barChartXAxisData.push(moment(item).format("MM-DD"));
            });
          }else{
            this.barChartXAxisData = entity.time;
          };
          this.barChartData = entity.data;
           this.studyStatisData = {//学习数据chart 数据对象
              dataName:"学习人数",
              xAname:"时间",
              yAname:"人"
          };
        
      })
    },
    getLearningRanking(){
      getLearningRanking({orgType:1,...this.statisticsTimeData}).then((res)=>{
        this.ranking = [...res.entity];
      });
    },
    getStudyFinishData(type){
      switch (type) {
        case "课程 ":
          this.finishData.studyType = 1;
          break;
        case "考试":
          this.finishData.studyType = 2;
          break;
        default:
          break;
      };
      getStudyFinishData(this.finishData).then((res)=>{
       this.legendData = [];
        let entity = res.entity;
        this.seriesData = [...entity];
        entity.forEach((item)=>{
           this.legendData.push(item.name)
        });        
      })
    },
    handleCommand(command){//切换学习卡
      this.cardRemain = parseFloat(command.remainNum/command.totalNum*100).toFixed(2);      
       this.cardName = command.cardName;
    },
    getStudyStatisticsType(){//判断请求不同数据数据
        if(this.statisType == 'time'){
         this.getStudyStatisticsByTime(this.statisticsTimeData);
        }else{
          this.getStudyUsersByTime(this.statisticsTimeData)
        }
    },
    changeTimeType(item){
      this.statisticsTimeData.startTime = "";
      this.statisticsTimeData.endTime = "";
      this.dateScope = [];
      this.statisticsTimeData.timeType = item.value;
      this.getStudyStatisticsType();
      this.getLearningRanking();
    },
    getTimeArray(){
      this.statisticsTimeData.timeType = "";
      this.statisticsTimeData.startTime = getMomentValue(this.dateScope[0]);
      this.statisticsTimeData.endTime = getMomentValue(this.dateScope[1]);
      this.getStudyStatisticsType();
       this.getLearningRanking();
      
    },

    changeStatisType(type){
       this.statisticsTimeData.timeType = "1";
       this.statisticsTimeData.startTime = "";
      this.statisticsTimeData.endTime = "";
      this.statisType = type;
      this.getStudyStatisticsType();
    },
    changeStudyDateType(data){
      this.getStudyFinishData(data);
      
    },
    getMinDepart(){
     let minIndex = this.departRange.minIndex;
      let maxIndex = this.departRange.maxIndex;
      if(minIndex>0){
        this.departRange.minIndex--;
        this.departRange.maxIndex--;
      }else{
        Message.info({
           message: '没有更多了',
        })
      }
      
    },
    getMaxDepart(){
       let minIndex = this.departRange.minIndex;
      let maxIndex = this.departRange.maxIndex;
      if(maxIndex<this.departmentArray.length-1){
        this.departRange.minIndex++;
        this.departRange.maxIndex++;
      }else{
        Message.info({
           message: '没有更多了',
        })
      }
      
    }


  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import "../../styles/studyStatistics.scss";
.card-data {
  height: 108px;
  margin-top: 18px;
  background: #fff;
  box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.05);
  padding: 10px;
  position: relative;
  .card-select{
    position: absolute;
    top:-30px;
  }
}
</style>
